<template>
  <div>
    <!-- 第一步 获取数据 -->
      <h1 style="text-align:center;">角色新增</h1>
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="角色名称">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <!-- 用可选择树形控件 -->
            <el-form-item label="角色权限">
                <el-tree
                    :data="authList"
                    :props="props"
                    show-checkbox
                    ref='auth'
                >
                </el-tree>
            </el-form-item>
            <el-form-item label="角色权限">
              <!-- 发送请求新增角色 -->
               <el-button type="primary" @click="onSubmit">
                新增
               </el-button>
            </el-form-item>
        </el-form>    
  </div>
</template>

<script>
//导入获取所有权限函数 角色新增函数
import {AuthList,RoleAdd} from '@/request'
export default {
  data () {
    return {
        props: {
            label: 'name',
            children: 'children'
        },
        form: {
          name:''
        },
        // 接收数据
        authList: []
      }
    },
  methods: {
        //定义方法
        async getAuthList() {
          // 调用 AuthList()
          let data = await AuthList()
        //  数据获取成功 赋值给 authList  有数据可以渲染了
          this.authList =  data.data.authlist
        },
        // 按钮点击事件
       async onSubmit() {
          // 获取数据  - 发请求
          console.log(this.form);
          // console.log(111,this.$refs.auth.getCheckedNodes());
          // 整理一下 获取到的所有权限
          let auths = this.$refs.auth.getCheckedNodes()
          //将所有id 整理到一起
          auths = auths.map(auth => auth._id)
          //遍历所有选中的权限
          //找子权限之前先判断 v是不是父权限  从所有权限中找有没有v
          //先将所有父权限的id 组成一个数组  
          //遍历所有权限要每个权限的_id 放在 parentIdArr 中
          let parentIdArr = this.authList.map(item => item._id)
          //判断v._id在不在 parentIdArr 中就知道它是不是父权限
          auths.forEach(v => {
            //判断当前v是否是父权限 找到是父权限  找不到是子权限
            let index = parentIdArr.indexOf(v._id)
            if(index < 0){
              //从所有权限当中找到当前这个子权限所在的父权限 - 遍历所有权限
                let parentId = ''
                this.authList.forEach(auth => {
                  //遍历所有子权限 判断有没有获取到  获取到了我们要的就是auth的 _id
                  if(auth.children.find(son => son._id === v)){
                      parentId = auth._id
                      //子跟父的id放一起
                      auths.push(parentId)
                  }
                }) 
             }  
          })
          //去重 然后可以发请求了
          auths = [...new Set(auths)]
          // console.log(auths);
          //第一步   将所有的auth中的父id和子id整理到一个数组中 有重复再把重复的去掉
          // 调用函数发请求 - 获取到await 等一下
         let data = await RoleAdd({
             name: this.form.name,
            //  这是数组数据  需要字符串数据
             auths: auths.join(',')
          })
            //判断修改成功或失败 提示
        let {error_code,msg} = data
        // 成功
          if(error_code === 200){
            this.$message({
                type: 'success',
                duration: 1500,
                message: msg,
                onClose: () =>{
                    this.$router.push('/role/list')
                }
            })
            // 编辑失败
          }else{
              this.$message({
                type: 'error',
                duration: 1500,
                message: msg
            })
          }
          console.log(data);
        }
    },
    // 调用方法
    created () {
      this.getAuthList()
    }
}
</script>

<style>
    
</style>
